<template>
	<view>
		<view class="b1">
			<!-- <view class="leftText"> -->
			<!-- <text class="color1">公告</text>
    		<text class="color2">信息</text> -->
			<!-- </view> -->
			<view :class="{ 'animate-up': animateUp }">
				<view class="item" v-for="(item, index) in list" :key="index" @click="jumpTo(item)">
					{{ item.title }}
				</view>
			</view>
			<view class="more" @click="handleMoreJump"></view>
		</view>
		<web-view v-if="url!=''" :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		name: 'Notice',
		props: ['plan_id', 'dataset'],
		data() {
			return {
				url: '',
				timer: null,
				animateUp: false,
				list: this.dataset
			}
		},
		watch: {
			dataset(val) {
				this.list = val
			}
		},
		onReady() {
			this.timer = setInterval(this.scrollAnimate, 3000)
		},
		destroyed() {
			clearInterval(this.timer)
		},
		created() {
			this.url = ''
		},
		methods: {
			handleMoreJump() {
				uni.navigateTo({
					url: '/commonViews/Notice'
				})
			},
			jumpTo(params) {
				if (params.link_url == '') {
					this.url = ''
					uni.navigateTo({
						url: '/commonViews/NoticeShow?id=' + params.id
					})
				} else {
					this.url = params.link_url
				}
			},
			// 公告滚动
			scrollAnimate() {
				this.animateUp = true
				setTimeout(() => {
					this.list.push(this.list[0])
					this.list.shift()
					this.animateUp = false
				}, 500)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.b1 {
		padding: 0 130rpx 0 130rpx;
		width: 100%;
		position: relative;
		height: 82rpx;
		overflow: hidden;
		border-radius: 15rpx;
		background-image: url('../../static/img/index/notice.png');
		background-repeat: no-repeat;
		background-color: #fff;
		background-position: 38rpx center;
		background-size: 53rpx 53rpx; 

		.animate-up {
			transition: all 0.55s ease-in-out;
			transform: translateY(-85rpx);
		}

		.more {
			&::after {
				position: absolute;
				right: 4rpx;
				top: 50%;
				width: 15rpx;
				height: 15rpx;
				margin-top: -6rpx;
				border-top: 2rpx solid #6D6D6D;
				border-right: 2rpx solid #6D6D6D;
				transform: rotate(45deg);
				content: " ";
			}

			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 24rpx;
			color: #999999;
			line-height:normal;
			width: 60rpx;
			height: 100%;
			margin-right: 30rpx;
		}

		&::after {
			content: "";
			position: absolute;
			left: 115rpx;
			top: 50%;
			transform: translate(0, -50%);
			height: 32rpx;
			border-right: 2rpx solid #e2e2e2;
		}

		.item {
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #2A2A2A; 
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

	}
</style>
